<template>
  <!-- 主容器，设置为垂直布局，宽高为100% -->
  <el-container
    style="display: flex; flex-direction: column; width: 100%; height: 100%"
  >

    <!-- 页面头部，背景色为蓝色 -->
    <el-header style="flex: 0 0 60px; background-color: #409eff">
      <div>
        <!-- 电话图标 -->
        <el-icon style="font-size: 30px; margin-right: 8px"><Phone /></el-icon>
        <!-- 网站标题 -->
        <h1>东软环保公众监督平台管理系统</h1>
      </div>
      <div>
        <!-- 显示系统管理员的账号信息 -->
        <p>系统管理员：{{admins.adminCode}}</p>
        <!-- 退出按钮 -->
        <el-button type="danger" size="small" @click="out">
          OUT&nbsp;&nbsp;<el-icon><DArrowRight /></el-icon>
        </el-button>
      </div>
    </el-header>

    <!-- 主体部分，包含侧边栏和主要内容区域 -->
    <el-container style="flex: 1">

      <!-- 侧边栏，设置宽度为200px，背景色为蓝色 -->
      <el-aside width="200px" style="background-color: #79bbff">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#79bbff"
          class="el-menu-vertical-demo"
          default-active="1"
          text-color="#fff"
          router
        >
          <!-- 公众监督数据管理子菜单 -->
          <el-sub-menu index="1">
            <template #title>
              <el-icon><ChatDotRound /></el-icon>
              <span>公众监督数据管理</span>
            </template>
            <!-- 菜单项，链接到公众监督数据列表页面 -->
            <el-menu-item index="/index/feedbackList"
              >公众监督数据列表</el-menu-item
            >
            <!-- 菜单项，链接到确认AQI数据列表页面 -->
            <el-menu-item index="/index/statisticsList"
              >确认AQI数据列表</el-menu-item
            >
          </el-sub-menu>

          <!-- 统计数据管理子菜单 -->
          <el-sub-menu index="2">
            <template #title>
              <el-icon><DocumentCopy /></el-icon>
              <span>统计数据管理</span>
            </template>
            <!-- 菜单项，链接到省分组检查统计页面 -->
            <el-menu-item index="/index/provinceItemTotalStatis"
              >省分组检查统计</el-menu-item
            >
            <!-- 菜单项，链接到AQI指数分布统计页面 -->
            <el-menu-item index="/index/aqiDistributeTotalStatis"
              >AQI指数分布统计</el-menu-item
            >
            <!-- 菜单项，链接到AQI指数趋势统计页面 -->
            <el-menu-item index="/index/aqiTrendTotalStatis"
              >AQI指数趋势统计</el-menu-item
            >
            <!-- 菜单项，链接到其它数据统计页面 -->
            <el-menu-item index="/index/otherTotalStatis"
              >其它数据统计</el-menu-item
            >
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 主要内容区域 -->
      <el-main>
        <!-- 路由视图，用于展示不同页面的内容 -->
        <router-view />
      </el-main>
    </el-container>

    <!-- 页面底部，显示版权信息 -->
    <el-footer style="flex: 0 0 60px; background-color: #409eff"
      >&copy; 版权所有 东软睿道 www.neusoft.com</el-footer
    >
  </el-container>
</template>

<script setup>
// 从 Element Plus 引入所需的图标
import {
  Phone,
  DArrowRight,
  ChatDotRound,
  DocumentCopy,
} from "@element-plus/icons-vue";

// 导入公共方法，获取和删除 sessionStorage 中的内容
import { getSessionStorage, removeSessionStorage } from '../common.js';
// 导入 Vue Router，用于页面导航
import { useRouter } from 'vue-router';

// 获取存储在 sessionStorage 中的管理员信息
const admins = getSessionStorage('admins');
// 初始化路由
const router = useRouter();

// 退出函数，清除 sessionStorage 中的管理员信息并跳转到登录页面
const out = ()=>{
  removeSessionStorage('admins');
  router.push('/login');
}
</script>

<style scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  color: #fff;
  user-select: none;
}
.el-header div {
  display: flex;
  align-items: center;
}
.el-header div h1 {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 1px;
}
.el-header div p {
  font-size: 16px;
  margin-right: 30px;
}
.el-footer {
  text-align: center;
  line-height: 60px;
  font-size: 14px;
  color: #fff;
}
</style>